<template>
	<div class="allVideo">
		<div class="nav">
			<template>
			  <el-tabs v-model="activeName" @tab-click="handleClick">
			    <el-tab-pane label="全部课程" name="first">
			    	<el-button type="text">c++</el-button>
			    	<el-button type="text">css</el-button>
			    	<el-button type="text">js</el-button>
			    	<el-button type="text">jquery</el-button>
			    	<el-button type="text">html5</el-button>
			    	<el-button type="text">UI</el-button>
			    	<el-button type="text">UE</el-button>
			    </el-tab-pane>
			    <el-tab-pane label="设计" name="second">
			    	<el-button type="text">UI</el-button>
			    	<el-button type="text">UE</el-button>
			    </el-tab-pane>
			    <el-tab-pane label="前端框架" name="third">
			    	<el-button type="text">require</el-button>
			    	<el-button type="text">vue</el-button>
			    	<el-button type="text">react</el-button>
			    	<el-button type="text">boot</el-button>
			    </el-tab-pane>
			  </el-tabs>
			</template>
		</div>
		<div class="video">
			<dl v-for="i in 30">
                <a :href="handleAudit('A')" target="_blank">
                    <dt>
                        <img src="../../../assets/img/img.jpg" alt="">
                        <div class="course-label">
                            <label>Java</label>
                            <label>Linux</label>
                        </div>
                    </dt>
                </a>
                <dd>
                    <h3>360大牛全面解读PHP面试</h3>
                    <span>实战</span>
                    <span>中级</span>
                    <span class="iconfont">&#xe60a; 2200</span>
                    <span>
                        <b class="iconfont1">&#xe7b9;</b>
                        <b class="iconfont1">&#xe7b9;</b>
                        <b class="iconfont1">&#xe7b9;</b>
                        <b class="iconfont1">&#xe7b9;</b>
                        <b class="iconfont1">&#xe7b9;</b>
                    </span>
                    <div style="clear:both" class="red">￥666.00</div>
                </dd>
            </dl>
		</div>
		<div style="clear:both;overflow:hidden">
		  <el-pagination class="pagination"
		    layout="prev, pager, next"
		    :total="50">
		  </el-pagination>
		</div>	
		
	</div>
</template>

<script>
	export default{
		name: 'allVideo',
		data(){
			return{
				activeName: 'second'
			}	
		},
		methods: {
	      handleClick(tab, event) {
	        console.log(tab, event);
	      },
          handleAudit(a){
                return `#/homePage/videoPlay`;
            },
	    }
       
	}
	
</script>

<style lang="less">
	.allVideo{
		.pagination{
			text-align: center;
			margin: 20px 0  20px 0;
			.el-pager li.active{
				border-color: #525252;
				background-color: #525252;
			}
		}
		width: 1150px;
		margin: 80px auto 0 auto;
		.nav{
			.el-button--text{
				display: inline-block;
				padding:8px 13px;
				color:#8391a5;
				text-align: center;
			}
			.el-button--text:focus{
			    background: #4a4a4a;
			    color: #fff;
			}
			.el-tabs__header{
			}
			.el-tabs__item.is-active{
				color:#000
			}
			.el-tabs__active-bar{
				background-color:#4a4a4a;
				height: 2px;
			}
		}
		.iconfont{
              display: inline-block;
              font-family:"iconfont";
              color:#707070;
              font-size: 12px;
              vertical-align: sub;
              margin-left:5px;
              cursor: pointer;
        }
        .iconfont1{
              
              font-family:"iconfont";
              color:#f5ae37;
         
        }
		.video{
			margin-top: 15px;
            width:1166px;
            dl{
                width: 216px;
                float: left;
                margin-right: 17px;	
                &:hover h3{
                    color:red;
                }
            }
            dt{
                width: 216px;
                height: 120px;
                position: relative;
                border-radius: 8px;
                transition: all .3s;
                img{
                    width: 100%;
                    height: 100%;
                    background-color: #f3f5f7;
                    border-radius: 8px;
                }
                div{
                    position: absolute;
                    bottom: 6px;
                    left: 8px;
                    font-size: 12px;
                    color: #FFF;
                    line-height: 16px;
                    label{
                        display: inline-block;
                        background: rgba(7,17,27,.4);
                        border-radius: 12px;
                        padding: 4px 8px;
                        margin-bottom: 2px;
                        margin-right: 0;
                        font-weight: 200;
                    }
                }
            }
            dd{
                margin:0;
                h3{
                    font-size: 16px;
                    color: #07111B;
                    line-height: 24px;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    max-height: 44px;
                    transition: all .3s;
                    margin-top:10px;
                }
                span{

                    margin-right: 10px;
                    float: left;
                    font-size: 12px;
                    color: #93999F;
                    line-height: 35px;
                    font-weight: 200;
                }
            }
    }
}

</style>